<template>
    <!--循环btnData-->
    <a-button class="btn" v-for="item in btnData" :key="item.BtnMark" :btnMark="item.BtnMark" :type="item.BtnType"
        :disabled="item.SingleSelected && props.selectedRowKeys.length !== 1" :style="item.BtnStyle" :title="item.Name"
        @click="handleMenuClick(item.BtnMethod)" v-bind="item.BtnAttr ? { [item.BtnAttr]: true } : {}">{{ item.Name
        }}</a-button>
    <!-- <a-button v-for="a in  " type="primary" style="margin-left: 20px"></a-button> -->
    <!-- 使用默认插槽 -->
    <!-- <slot name="button"></slot>  -->
    <!-- 使用默认插槽，过滤掉需要移除的按钮 -->
    <!-- 渲染过滤后的按钮插槽 -->
    <template v-for="(node, index) in filteredButtonSlots" :key="index">
        <div v-if="node.type" class="filtered-button">
            <component :is="node" v-bind="{
                ...node.props,
                disabled: node.props?.btnMark ? shouldDisableButton(node.props.btnMark) : false
            }" v-on="node.props?.on || {}" />
        </div>
    </template>
</template>

<script type="ts" setup>
import { inject, ref, useSlots, onMounted, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getPageBtnData } from '@/api/syssetting/menu';
import { notification, message } from 'ant-design-vue';
//import { MenuInput } from '@/type/syssetting/menu';

const route = useRoute();
const router = useRouter();
const slots = useSlots();
const btnData = ref([]);
// 用于存储过滤后的按钮插槽节点
const filteredButtonSlots = ref([]);

const parentMethods = inject('parentMethods');
const handleMenuClick = (funcname) => {
    parentMethods[funcname]?.();
};
// 添加一个方法来检查按钮是否需要禁用
const shouldDisableButton = (btnMark) => {
    const btnItem = btnRemoveDatas.find(item => item.BtnMark === btnMark);
    return btnItem?.SingleSelected && props.selectedRowKeys.length !== 1;
};

const props = defineProps({
    selectedRowKeys: {
        type: Array,
        default: () => []
    }
});
let btnRemoveDatas = [];
let btnDatas = [];
onMounted(() => {
    //console.log("path", route.path); // 获取当前路由的路径
    // console.log("name", route.name); // 获取路由名称
    // console.log("params", route.params); // 获取URL参数
    // console.log("query", route.query); // 获取查询参数
    // console.log("value", router.currentRoute.value); // 
    let path = route.path;

    getPageBtnData({ PagePath: path }).then((res) => {
        btnDatas = res.data.Data;
        let oriBtnDatas = res.data.Data;
        const buttonSlot = slots.button;
        // 将 btnDatas 中的 BtnMark 存储到 Set 中，方便快速查找
        const validBtnMarks = new Set(btnDatas.map(item => item.BtnMark));
        if (buttonSlot) {
            const vNodes = buttonSlot();
            // 过滤出 btnMark 存在于 validBtnMarks 中的节点
            filteredButtonSlots.value = vNodes.filter(node => {
                if (node.props && node.props.btnMark) {
                    return validBtnMarks.has(node.props.btnMark);
                }
                return false;
            });
            // 递归函数用于遍历 VNode 树
            const traverseVNodes = (nodes) => {

                nodes.forEach((node) => {
                    if (node.type.name === 'AButton' || (node.props && node.props.tag === 'AButton')) {

                        if (btnDatas && node.props.btnMark) {
                            btnDatas = btnDatas.filter((item) => item.BtnMark !== node.props.btnMark);
                        }
                    }
                    if (node.children && Array.isArray(node.children)) {
                        traverseVNodes(node.children);
                    }
                });
            };
            traverseVNodes(vNodes);

        }
        btnData.value = btnDatas;
        btnRemoveDatas = oriBtnDatas.filter(item => !btnDatas.some(btnItem => btnItem.BtnMark === item.BtnMark));
    }).catch((err) => {
        console.log("获取菜单发生错误" + err);
        message.error("获取菜单发生错误" + err);
    });

})

</script>

<style lang="scss" scoped>
.btn {
    margin-left: 20px;
}
</style>